<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>主页示例</title>
		<script type="text/javascript">
			function init() {
				refresh();
			}

			function refresh() {
				var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
				var url = ""; // 请求的URL

				xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求

				var post_req = {
					"type": 1,
					"limit": "all"
				};

				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
						var response = xhr.responseText; // 获取响应数据
						var info = JSON.parse(response)  //将json字符串反序列化为json对象
						console.log(info); // 在浏览器控制台打印响应数据
						for (var i = 0; i < info.data.length; i++) {
							// console.log('data = ', info.data[i].val)

							if (info.data[i].key == 1) {
								document.getElementById('temp').value = info.data[i].val;
							} else if (info.data[i].key == 2) {
								document.getElementById('hum').value = info.data[i].val;
							} else if (info.data[i].key == 3) {
								document.getElementById('ill').value = info.data[i].val;
							}
						}						
					}
				};
				
				//将json对象序列化为json字符串
				xhr.send(JSON.stringify(post_req)); // 发送请求，并将数据转换为JSON字符串
			}

		</script>
	</head>
	<body onload="init()">
		<a href="temp_index.html">主页</a>
		<a href="temp_stm32.html">stm32示例页面</a>
		<a href="temp_modbus.html">modbus示例页面</a>
		
		<div>
			<form>
				<br />
				温度<input type="text" id="temp" value=""/><br />
				湿度<input type="text" id="hum" value=""/><br />
				光照<input type="text" id="ill" value=""/>
			</form>
		</div>		
	</body>
</html>